import React, { useEffect, useState } from 'react';
import { Button } from 'antd';
import styled from '@emotion/styled';
import { IBusinessStatus, useBusiness } from '../Context/BusinessContext';
import { useStream } from '../Context/StreamContext';
import { useTranslation } from 'react-i18next';

interface InstructionsProps {
	businessData?: any;
}

const InstructionsDiv = styled.div`
	width: auto;
	max-width: 100%;
	height: 44px;
	align-items: center;
	background: #3c6c9d;
	left: 50%;
	transform: translate(-50%, 0);
	bottom: 0px;
	display: flex;
	z-index: 30;
	padding: 0 10px;
	position: absolute;
`;

const InstructionsP = styled.p`
	white-space: nowrap;
	font-size: 10px;
	margin: 0;
	color: #ffffff;
	padding-right: 4px;
`;

const InstructionsButton = styled(Button)`
	width: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
	font-size: 10px !important;
`;

const InstructionsSpan = styled.span`
	font-family: simsun;
	display: inline-block;
	width: 1.5em;
	vertical-align: bottom;
	overflow: hidden;
	animation: dot 3s infinite step-start;
	@keyframes dot {
		0% {
			width: 0;
			margin-right: 1.5em;
		}
		33% {
			width: 0.5em;
			margin-right: 1em;
		}
		66% {
			width: 1em;
			margin-right: 0.5em;
		}
		100% {
			width: 1.5em;
			margin-right: 0;
		}
	}
`;

const Instructions = (props: InstructionsProps) => {
	const { t } = useTranslation();
	const { businessData } = props;

	const [businessText, setBusinessText] = useState<string>('');

	const [cancelBtnText, setCancelBtnText] = useState<string>('');

	const [showCancelBtn, setShowCancelBtn] = useState<boolean>(false);
	const { cancelBusiness } = useBusiness();

	useEffect(() => {
		if (businessData.name === 'customerViewMark') {
			// 实时标注
			if (businessData.status === IBusinessStatus.ACCEPTED || businessData.status === IBusinessStatus.IN_PROGRESS) {
				parseInstruction();
			} else {
				setBusinessText(t('instruct-message-send-in-progress') as string);
				setShowCancelBtn(false);
			}
		} else if (businessData.name !== 'customerViewMark' && businessData.status === IBusinessStatus.IN_PROGRESS) {
			parseInstruction();
		} else {
			setBusinessText(t('instruct-message-send-in-progress') as string);
			setShowCancelBtn(false);
		}
		console.log('InstructionsDiv businessData: ', businessData);
	}, [businessData]);

	const parseInstruction = () => {
		switch (businessData.name) {
			case 'screenshot':
				setBusinessText(t('snapshoting') as string);
				setShowCancelBtn(false);
				setCancelBtnText('');
				break;
			case 'screenShare':
				setBusinessText(t('screen-sharing') as string);
				setShowCancelBtn(true);
				setCancelBtnText(t('end-sharing') as string);
				break;
			case 'snapShot':
				setBusinessText(t('screenshoting') as string);
				setShowCancelBtn(false);
				setCancelBtnText('');
				break;
			case 'getGeoLocaltion':
				setBusinessText(t('getting-location') as string);
				setShowCancelBtn(true);
				setCancelBtnText(t('cancel') as string);
				break;
			case 'sendScannerCode':
				setBusinessText(t('scanning-code') as string);
				setShowCancelBtn(true);
				setCancelBtnText(t('cancel') as string);
				break;
			// 实时标注
			case 'customerViewMark':
				setBusinessText(t('customer-view-mark-ing') as string);
				setShowCancelBtn(true);
				setCancelBtnText(t('cancel') as string);
				break;
			case 'sendSign':
				setBusinessText(t('signing') as string);
				setShowCancelBtn(true);
				setCancelBtnText(t('cancel-signature') as string);
				break;
			case 'faceCompare':
				setBusinessText(t('face-comparisoning') as string);
				setShowCancelBtn(false);
				setCancelBtnText('');
				break;
			case 'cardCompare':
				setBusinessText(t('face-idcard-comparing') as string);
				setShowCancelBtn(false);
				setCancelBtnText('');
				break;
			case 'fillForm':
				setBusinessText(t('form-filling') as string);
				setShowCancelBtn(true);
				setCancelBtnText(t('cancel') as string);
				break;
			case 'sendIdCardCollection':
				setBusinessText(t('id-card-collecting') as string);
				setShowCancelBtn(true);
				setCancelBtnText(t('cancel') as string);
				break;
			case 'sendBankCardCollection':
				setBusinessText(t('bank-card-collecting') as string);
				setShowCancelBtn(true);
				setCancelBtnText(t('cancel') as string);
				break;
			case 'sharedWhiteboard':
				setBusinessText(t('whiteboard-sharing') as string);
				setShowCancelBtn(true);
				setCancelBtnText(t('cancel') as string);
				break;
			case 'sharedPDF':
				setBusinessText(t('pdf-sharing') as string);
				setShowCancelBtn(true);
				setCancelBtnText(t('cancel') as string);
				break;
			case 'sendVariableCollection':
				setBusinessText(t('variable-collecting') as string);
				setShowCancelBtn(true);
				setCancelBtnText(t('cancel') as string);
				break;
			case 'transcriptOfTestimony':
				setBusinessText(t('testimony-transcripting') as string);
				setShowCancelBtn(true);
				setCancelBtnText(t('cancel') as string);
				break;
			case 'sendVideoCollection':
				setBusinessText(t('short-video-collecting') as string);
				setShowCancelBtn(true);
				setCancelBtnText(t('cancel') as string);
				break;
			default:
				break;
		}
		if (businessData.type === 'broadcast') {
			setShowCancelBtn(false);
			setCancelBtnText('');
		}
	};

	return (
		<InstructionsDiv>
			<InstructionsP>
				<span>{businessText}</span>
				<InstructionsSpan>...</InstructionsSpan>
			</InstructionsP>
			{showCancelBtn ? (
				<InstructionsButton type="primary" ghost className="cancel-btn-instructions" onClick={() => cancelBusiness(businessData.clientId, businessData.name)}>
					{cancelBtnText}
				</InstructionsButton>
			) : undefined}
		</InstructionsDiv>
	);
};

export default Instructions;
